import React, { Component, PropTypes } from 'react';
import { WingBlank, WhiteSpace, List, Modal } from 'antd-mobile';
import MemberInfo from 'components/MemberInfo';
import { routerRedux } from 'dva/router';
import { connect } from 'dva';
import styles from './styles.less';

const { Item, Item: { Brief } } = List;

const TongueDetailPage = ({ dispatch, detail, list }) => {

  let text;
  const dele = () => {
    Modal.alert('提示', '确认要彻底删除记录吗？', [
      { text: '取消', onPress() { } },
      { text: '确定', onPress: () => {
        dispatch({
          type: 'tongue/delete',
          payload: {
            id:detail.id,
            patientId:detail.patientId,
          },
        });
      }}
    ]);
  };
  if(detail.comment == "undefined"){
     detail.comment = "暂无备注内容";
  }

  return (
    <div>
      <MemberInfo {...list[0]} 
        extra={
          <button
            type="button"
            onClick={dele}>删除
          </button>
        }
      />
      <WhiteSpace />
      <WingBlank size="md">
        <List wrap>
          <Item extra={null}>备注：
            <Brief>
              {detail.comment || "暂无备注内容"}
            </Brief>
            <WhiteSpace size="lg" />
          </Item>
          <Item extra={null}>舌图：
            <Brief>
              <img src={detail.step1Pic} className={styles.tongueImageOriginal} />
            </Brief>
            <WhiteSpace size="xl" />
            <Brief>
              <img src={detail.step2Pic} className={styles.tongueImageOriginal} />
            </Brief>
            <WhiteSpace size="xl" />
          </Item>
        </List>
      </WingBlank>
    </div>
  );
};

export default connect(({ tongue }) => ({
  ...tongue,
}))(TongueDetailPage);
